<template>
    <el-row class="serverIoLoad">
        <el-col :span="24" class="serverIoLoad-box">
            <div id="IoLoad" ref="IoLoad" class="serverIoLine"></div>
        </el-col>
        <!-- <el-col :span="24" class="serverIoText-box">
            <span class="textIo">IO 使用率：{{'0'}} </span>
            <br>
            <span class="textIo">IO 等待率：{{'0'}}</span>
        </el-col> -->
    </el-row>
</template>>

<script>
import { fetchData } from '@/api/index.js';
import bus from 'common/bus.js';

export default {
    data() {
        return {
            postData: {
                opera: 'hostCpuMemory',
                curPage: 1,
                pageSize: 20,
                sort: {
                    sortColumn: '',
                    sortOrders: ''
                },
                filtersType: 'fuzzyquery',
                filters: {
                    "monid": "228B951118944B3DA53D6AA9FC14DA79",
                },
            },
            ioUsage: '25%',
            ioWait: '5%',
            date : [],
            IoLoad: {},
            CPUx: 0,
            CPUy: 0,
            EChartsOption: {
                animationDuration: 100,
                animationEasingUpdate: 'quinticInOut',
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    top: '9%',
                    // left: '0%',
                    height: '87%',
                    width: '83%',
                    // containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    splitLine: {
                        show: false,
                        lineStyle: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLable:{
                        show: false
                    },
                    data: this.testData(),
                    axisLine: {color:'rgb(29, 140, 248)',lineStyle:{color:'rgb(29, 140, 248)'}},
                },
                yAxis: {
                    type: 'value',
                    max: 100,
                    min: 0,
                    interval: 25,
                    boundaryGap: ['5%', '5%'],
                    splitLine: {
                        show: true,
                        lineStyle: {
                            opacity: 0.4,
                            type: 'dotted',
                            color: 'rgb(145, 199, 174)',
                        }
                    },
                    axisLine: {color:'rgb(29, 140, 248)',lineStyle:{color:'rgb(29, 140, 248)'}},
                    
                },
                series: [{
                    name: '内存使用率',
                    data: [],
                    type: 'line',
                    color: 'rgb(194, 131, 213)',
                    showSymbol: false,
                }]
            },
            timerName: 'IoLoad',
            timerEventName: 'timerIoLoad',
            timerInterval: 1000 * 60
        }
    },
    created() {
        this.getData();

        bus.$on('selectedMonIDServer', msg => {
            this.selectedMonID = msg;
            this.postData.filters.monid = this.selectedMonID.selectedOSMonID;
            this.initGetData();
        });
        

        bus.$emit('timerNewTodo', {
            name: this.timerName,
            eventName: this.timerEventName,
            interval: this.timerInterval,
            intervalNow: 0
        });

        bus.$on(this.timerEventName, msg => {
            if (msg.isGetData) {
                // let axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');
                // this.getData();
                // this.date.shift();
                // let _new = Math.floor((Math.random() * 30) + 35);
                // this.date.push(_new);
                // this.EChartsOption.xAxis.data.shift();
                // this.EChartsOption.xAxis.data.push(axisData);
                // this.IoLoad.setOption({
                //     xAxis: {
                //         data: this.EChartsOption.xAxis.data
                //     },
                //     series: {
                //         data: this.date
                //     }
                // })
            }
        });
    },
    mounted() {
        this.IoLoad = this.$echarts.init(this.$refs.IoLoad);
        this.drawCPULine();
        window.onresize= () =>{
            let myEchart = this.$echarts.init(this.$refs.IoLoad);
            myEchart.resize();
        }
    },
    computed: {
        postDataFn() {
            return {
                postData : JSON.stringify(this.postData)
            }
        }
    },
    methods: {
        initGetData(){
            this.IoLoad.showLoading({
                text: '加载中...',
                color: '#c23531',
                textColor: '#fff',
                maskColor: 'rgba(2, 16, 51, 0.8)',
                zlevel: 0,
                fontSize: 12,
                showSpinner: true,
                spinnerRadius: 10,
                lineWidth: 5
            });

            let _postData = {
                opera: 'IoUsageLine',
                filters: {
                    "monid": this.postData.filters.monid,
                    "pointNum": this.getNum
                },
            };

            fetchData({
                postData : JSON.stringify(_postData)
            }).then((res) => {
                let _ioNum = [];
                let _xAxisData = [];
                
                if (res.dataTotal > 0) {
                    res.data.forEach(element => {
                        
                        _ioNum.push(Number((100 - element.CPU_IDLE).toFixed(1)));
                        _xAxisData.push(element.RECORD_TIME);
                    });
                    
                    this.ioLastSN = [...res.data].pop().SN;
                    this.ioUsage = Number((100 - [...res.data].pop().CPU_IDLE).toFixed(1));
                }
                
                this.ioNum = _ioNum;
                this.EChartsOption.xAxis.data = _xAxisData;

                this.IoLoad.setOption({
                    xAxis: {
                        data: _xAxisData
                    },
                    series: {
                        data: _ioNum
                    }
                });

                this.IoLoad.hideLoading();
            });
        },
        getData(){
            fetchData(
                this.postDataFn
            ).then((res) => {
                if (res.data.length > 0) {
                    // this.date = [res.data[0].ALL_USED];
                    // if (res.data.length > 0) {
                    //     this.EChartsOption.xAxis.data.shift();
                    //     let _str = res.data[0].MEM_RECORD_TIME.replace(/\s+/g,"\n");
                    //     this.EChartsOption.xAxis.data.push(_str);
                    // }
                }
            });
        },
        drawCPULine(){
            this.IoLoad.setOption(this.EChartsOption);
        },
        testData() {
            let _arr = [];
            for (let i = 0; i < 60; i++) {
                _arr.push('');
            }
            
            return _arr;
        },
        testData2() {
            let _arr = new Array(60);
            
            return _arr;
        }
    },
    beforeDestroy() {
        bus.$emit('timerNewTodo', {
            name: this.timerName
        });
        
        this.IoLoad.dispose();
    },
    // watch:{
    //     'EChartsOption': {
    //         handler: function () {
    //             this.drawCPULine();
    //         },
    //         deep: true
    //     }
    // }
}
</script>
<style scoped>
.serverIoLoad{
    height: 83%;
    margin-bottom: 0 !important;
}
.serverIoLoad-box{
    height: 70%;
}
.serverIoLine{
    height: 100%;
}
.serverIoText-box{
    height: 28%;
    text-align: center;
    margin-top: 0.7%;
    overflow: hidden;
}
.textIo{
    color: seashell;
    font-size: large;
}
</style>